<template>
  <el-dialog
    v-model="uploadStore.isDialogVisible"
    title="文件上传"
    width="600px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="!uploadStore.isUploading"
  >
    <!-- 头部统计信息 -->
    <div class="upload-header">
      <div class="upload-stats">
        <span class="total-progress">
          总进度: {{ uploadStore.totalProgress }}%
        </span>
        <span class="task-count">
          {{ uploadStore.uploadingTasks.length }} 个上传中，
          {{ uploadStore.completedTasks.length }} 个已完成
        </span>
      </div>
      <div class="upload-actions">
        <el-button
          v-if="uploadStore.completedTasks.length > 0"
          size="small"
          @click="uploadStore.clearCompletedTasks"
        >
          清空已完成
        </el-button>
        <el-button
          size="small"
          type="danger"
          @click="handleClearAll"
        >
          全部取消
        </el-button>
      </div>
    </div>

    <!-- 总进度条 -->
    <div class="total-progress-bar">
      <el-progress
        :percentage="uploadStore.totalProgress"
        :status="uploadStore.isUploading ? undefined : 'success'"
        :stroke-width="8"
      />
    </div>

    <!-- 任务列表 -->
    <div class="upload-list">
      <div
        v-for="task in uploadStore.tasks"
        :key="task.id"
        class="upload-item"
        :class="[`status-${task.status}`]"
      >
        <!-- 文件信息 -->
        <div class="file-info">
          <div class="file-icon">
            <el-icon :size="24">
              <Document />
            </el-icon>
          </div>
          <div class="file-details">
            <div class="file-name" :title="task.fileName">
              {{ task.fileName }}
            </div>
            <div class="file-meta">
              {{ uploadStore.formatFileSize(task.fileSize) }}
              <span v-if="task.speed > 0" class="upload-speed">
                • {{ uploadStore.formatSpeed(task.speed) }}
              </span>
              <span v-if="task.remainingTime > 0" class="remaining-time">
                • 剩余 {{ uploadStore.formatTime(task.remainingTime) }}
              </span>
            </div>
          </div>
        </div>

        <!-- 进度条 -->
        <div class="progress-section">
          <el-progress
            :percentage="task.progress"
            :status="getProgressStatus(task.status)"
            :stroke-width="6"
            :show-text="false"
          />
          <div class="progress-text">
            <span v-if="task.status === UploadStatus.WAITING">等待中...</span>
            <span v-else-if="task.status === UploadStatus.UPLOADING">
              {{ task.progress }}%
            </span>
            <span v-else-if="task.status === UploadStatus.SUCCESS" class="success-text">
              上传成功
            </span>
            <span v-else-if="task.status === UploadStatus.ERROR" class="error-text">
              {{ task.errorMessage || '上传失败' }}
            </span>
            <span v-else-if="task.status === UploadStatus.CANCELED" class="canceled-text">
              已取消
            </span>
          </div>
        </div>

        <!-- 操作按钮 -->
        <div class="task-actions">
          <el-button
            v-if="task.status === UploadStatus.UPLOADING"
            size="small"
            type="danger"
            @click="uploadStore.cancelTask(task.id)"
          >
            取消
          </el-button>
          <el-button
            v-else-if="task.status === UploadStatus.ERROR"
            size="small"
            type="primary"
            @click="handleRetry(task.id)"
          >
            重试
          </el-button>
          <el-button
            v-if="task.status === UploadStatus.SUCCESS || task.status === UploadStatus.ERROR || task.status === UploadStatus.CANCELED"
            size="small"
            @click="uploadStore.removeTask(task.id)"
          >
            移除
          </el-button>
        </div>
      </div>

      <!-- 空状态 -->
      <div v-if="uploadStore.tasks.length === 0" class="empty-state">
        <el-empty description="暂无上传任务" />
      </div>
    </div>

    <!-- 底部 -->
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="uploadStore.hideDialog">
          {{ uploadStore.isUploading ? '最小化' : '关闭' }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ElMessageBox, ElMessage } from 'element-plus'
import { Document } from '@element-plus/icons-vue'
import { useUploadStore, UploadStatus } from '@/stores/upload'

const uploadStore = useUploadStore()

// 获取进度条状态
const getProgressStatus = (status: UploadStatus) => {
  switch (status) {
    case UploadStatus.SUCCESS:
      return 'success'
    case UploadStatus.ERROR:
      return 'exception'
    default:
      return undefined
  }
}

// 重试上传
const handleRetry = (taskId: string) => {
  uploadStore.retryTask(taskId)
  ElMessage.info('重新开始上传')
}

// 清空所有任务
const handleClearAll = async () => {
  if (uploadStore.isUploading) {
    try {
      await ElMessageBox.confirm(
        '当前有文件正在上传，确定要取消所有上传任务吗？',
        '确认取消',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
      uploadStore.clearAllTasks()
      ElMessage.success('已取消所有上传任务')
    } catch {
      // 用户取消操作
    }
  } else {
    uploadStore.clearAllTasks()
    ElMessage.success('已清空所有任务')
  }
}
</script>

<style scoped>
.upload-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e6e6e6;
}

.upload-stats {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.total-progress {
  font-weight: 600;
  color: #409eff;
  font-size: 16px;
}

.task-count {
  font-size: 13px;
  color: #666;
}

.upload-actions {
  display: flex;
  gap: 8px;
}

.total-progress-bar {
  margin-bottom: 20px;
}

.upload-list {
  max-height: 400px;
  overflow-y: auto;
}

.upload-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  margin-bottom: 8px;
  transition: all 0.3s;
}

.upload-item:hover {
  background-color: #f8f9fa;
}

.upload-item.status-uploading {
  border-color: #409eff;
  background-color: #f0f9ff;
}

.upload-item.status-success {
  border-color: #67c23a;
  background-color: #f0f9f0;
}

.upload-item.status-error {
  border-color: #f56c6c;
  background-color: #fef0f0;
}

.upload-item.status-canceled {
  border-color: #909399;
  background-color: #f4f4f5;
}

.file-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.file-icon {
  color: #409eff;
  flex-shrink: 0;
}

.file-details {
  flex: 1;
  min-width: 0;
}

.file-name {
  font-weight: 500;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 2px;
}

.file-meta {
  font-size: 12px;
  color: #666;
  display: flex;
  align-items: center;
  gap: 4px;
}

.upload-speed {
  color: #409eff;
  font-weight: 500;
}

.remaining-time {
  color: #909399;
}

.progress-section {
  flex: 1.5;
  min-width: 120px;
}

.progress-text {
  text-align: center;
  font-size: 12px;
  margin-top: 4px;
  height: 16px;
}

.success-text {
  color: #67c23a;
  font-weight: 500;
}

.error-text {
  color: #f56c6c;
}

.canceled-text {
  color: #909399;
}

.task-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.empty-state {
  padding: 40px 0;
}

.dialog-footer {
  text-align: right;
}

/* 自定义滚动条 */
.upload-list::-webkit-scrollbar {
  width: 6px;
}

.upload-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.upload-list::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.upload-list::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>